<!--
TO DO LIST
//refresh datagrid
//load from grid to add/update form
//filter for current view grid
//find to grid
//russian letters!!!
-->
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>!!!Demo: dojox/grid/DataGrid Simple Structure</title>
        <link rel="stylesheet" href="../dojo/dojo/resources/dojo.css" />
        <link rel="stylesheet" href="../dojo/dijit/themes/claro/claro.css" />
        <link rel="stylesheet" href="../dojo/dojox/grid/resources/Grid.css" />
        <link rel="stylesheet" href="../dojo/dojox/grid/resources/claroGrid.css" />
        <!--link rel="stylesheet" href="style.css" media="screen"-->
        <!--link rel="stylesheet" href="../../../resources/style/demo.css" media="screen"-->
        <script>dojoConfig = {parseOnLoad: true}</script>
        <script src='../dojo/dojo/dojo.js'></script>                

    </head>
    <!--body class="nihilo"-->
    <body class="claro">
        <!-- this div is only for documentation purpose, in real development environments, just take it out -->
        <script>
            require(["dojo/parser", "dijit/layout/TabContainer", "dijit/layout/ContentPane"]);
            require(["dojo/parser", "dijit/form/Form", "dijit/form/Button", "dijit/form/ValidationTextBox", "dijit/form/DateTextBox"]);


            dojo.require("dijit.form.Button");
            dojo.require("dijit.form.TextBox");
            dojo.require("dijit.form.CheckBox");

            function sendForm() {
                var form = dojo.byId("myForm");

                dojo.connect(form, "onsubmit", function(event) {
                    // Stop the submit event since we want to control form submission.
                    dojo.stopEvent(event);

                    // The parameters to pass to xhrPost, the form, how to handle it, and the callbacks.
                    // Note that there isn't a url passed.  xhrPost will extract the url to call from the form's
                    //'action' attribute.  You could also leave off the action attribute and set the url of the xhrPost object
                    // either should work.
                    var xhrArgs = {
                        form: dojo.byId("myForm"),
                        handleAs: "text",
                        load: function(data) {
                            dojo.byId("response").innerHTML = "Form posted.";
                        },
                        error: function(error) {
                            // We'll 404 in the demo, but that's okay.  We don't have a 'postIt' service on the
                            // docs server.
                            dojo.byId("response").innerHTML = "Form posted.";
                        }
                    }
                    // Call the asynchronous xhrPost
                    dojo.byId("response").innerHTML = "Form being sent..."
                    var deferred = dojo.xhrPost(xhrArgs);
                });
            }
            dojo.ready(sendForm);


            dojo.require("dojox.grid.DataGrid");
            dojo.require("dojox.data.CsvStore");
            dojo.require("dijit.form.Button");
            require([
                "dojox/grid/DataGrid",
                "dojo/store/Memory",
                "dojo/data/ObjectStore",
                "dojo/request",
                "dojo/domReady!"
            ], function(DataGrid, Memory, ObjectStore, request) {
                //grid1
                var dataStore;
                //request.get("hof-batting.json", {
                request.get("sel", {
                    handleAs: "json"
                }).then(function(data) {
                    dataStore = new ObjectStore({objectStore: new Memory({data: data.items})});

                    var grid1 = new DataGrid({
                        store: dataStore,
                        query: {id: "*"},
                        clientSort: true,
                        rowSelector: '10px',
                        queryOptions: {},
                        structure: [
                            {name: "ID", field: "col1", width: "25%"},
                            {name: "SDESCR", field: "col2", width: "25%"},
                            {name: "DESCR", field: "col3", width: "10%"},
                            {name: "CTIME", field: "col4", width: "10%"},
                            {name: "MTIME", field: "col5", width: "10%"},
                        ]
                    }, "grid");
                    grid1.startup();
                });
            });




            function reloadGrid(evt) {

                //dojo.byId("grid3").innerHTML="<div id='grid3'></div>";

                //alert("!");
//                dojo.require("dojox.grid.DataGrid");
//                dojo.require("dojox.data.CsvStore");
//                dojo.require("dijit.form.Button");
//                require([
//                    "dojox/grid/DataGrid",
//                    "dojo/store/Memory",
//                    "dojo/data/ObjectStore",
//                    "dojo/request",
//                    "dojo/domReady!"
//                ], function(DataGrid, Memory, ObjectStore, request) {
//                    //grid1
//                    var dataStore = null;
//                    //request.get("hof-batting.json", {
//                    request.get("sel", {
//                        handleAs: "json"
//                    }).then(function(data) {
//                        dataStore = new ObjectStore({objectStore: new Memory({data: data.items})});
//
//                        var grid_v1 = new DataGrid({
//                            store: dataStore,
//                            query: {id: "*"},
//                            clientSort: true,
//                            rowSelector: '10px',
//                            queryOptions: {},
//                            structure: [
//                                {name: "ID", field: "col1", width: "25%"},
//                                {name: "SDESCR", field: "col2", width: "25%"},
//                                {name: "DESCR", field: "col3", width: "10%"},
//                                {name: "CTIME", field: "col4", width: "10%"},
//                                {name: "MTIME", field: "col5", width: "10%"},
//                            ]
//                        }, "grid3");
//                        grid_v1.update();
//                        grid_v1._lastScrollTop = grid_v1.scrollTop;
//                        grid_v1._refresh();
//                        grid_v1.startup();
//
//                    });
//                });
                //grid1.update();
                //grid1._lastScrollTop = grid.scrollTop;
                //grid1._refresh();
                //alert("1");

            }


        </script>
        <div style="height:320px;">
            <div data-dojo-type="dijit/layout/TabContainer" style="width: 100%;" doLayout="false">
                <div data-dojo-type="dijit/layout/ContentPane" title="Добавить/Редактировать" data-dojo-props="selected:true">
                    68  //название
                    //описание
                    //план 
                    ///открытие
                    ///фаза D
                    ///фаза M
                    ///фаза A
                    ///фаза I
                    ///фаза C

                    //РП

                    //Менеджер
                    <div data-dojo-type="dijit/form/Form" id="myForm" data-dojo-id="myForm"
                         encType="multipart/form-data" action="create" method="get">
                        <script type="dojo/on" data-dojo-event="reset">
                            return confirm('Press OK to reset widget values');
                        </script>

                        <script type="dojo/on" data-dojo-event="submit">
                            if(this.validate()){
                            //return confirm('Form is valid, press OK to submit')                            ;
                            }else{
                            alert('Form contains invalid data.  Please correct first');
                            return false;
                            }
                            return true;
                        </script>

                        <table style="border: 1px solid #9f9f9f;" cellspacing="10">
                            <tr>
                                <td>
                                    <label for="name">Название:</label>
                                </td>
                                <td>
                                    <input type="text" id="name" name="param1" required="true" data-dojo-type="dijit/form/ValidationTextBox"/>
                                </td>
                                <td>
                                    <label for="name1">Описание</label>
                                </td>
                                <td>
                                    <input type="text" id="name1" name="param12" required="false" data-dojo-type="dijit/form/ValidationTextBox"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="fasestart">Открытие проекта:</label>
                                </td>
                                <td>
                                    <input type="text" id="fasestart" name="param2" required="false"  data-dojo-type="dijit/form/DateTextBox"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="faseD">Завершение фазы D:</label>
                                </td>
                                <td>
                                    <input type="text" id="faseD" name="param3" data-dojo-type="dijit/form/DateTextBox"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="faseM">Завершение фазы M:</label>
                                </td>
                                <td>
                                    <input type="text" id="faseM" name="param4" data-dojo-type="dijit/form/DateTextBox"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="faseA">Завершение фазы A:</label>
                                </td>
                                <td>
                                    <input type="text" id="faseA" name="param5" data-dojo-type="dijit/form/DateTextBox"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="faseI">Завершение фазы I:</label>
                                </td>
                                <td>
                                    <input type="text" id="faseI" name="param6" data-dojo-type="dijit/form/DateTextBox"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label for="faseC">Завершение фазы C:</label>
                                </td>
                                <td>
                                    <input type="text" id="faseC" name="param7" data-dojo-type="dijit/form/DateTextBox"/>
                                </td>
                            </tr>
                        </table>

                        <button data-dojo-type="dijit/form/Button" type="button" onClick="console.log(myForm.getValues())">Get Values from form!</button>
                        <button data-dojo-type="dijit/form/Button" type="submit" name="submitButton" value="Submit">Зарегестрировать</button>
                        <button data-dojo-type="dijit/form/Button" type="reset">Reset</button>
                    </div>                    
                </div>
                <div data-dojo-type="dijit/layout/ContentPane" title="Расширенный поиск" data-dojo-props="closable:false">

				
                </div>
                <div data-dojo-type="dijit/layout/ContentPane" title="Войти/Зарегистрироваться">

                </div>
            </div>
        </div>          
        <hr/>
        <div id="grid"></div>
        <hr/>
        <div id="grid3"></div>
        <!-- load dojo and provide config via data attribute -->
        <!--script src="../dojo/dojo/dojo.js" data-dojo-config="isDebug: true, async: true"></script-->
        <script>






        </script>


        <hr/>
        <button data-dojo-type="dijit/form/Button" type="reset" onClick="reloadGrid()">Reset</button>
        <b>Result</b>
        <div id="response"></div>
    </body>
</html>